<template>
	<view>
		<view class="plate-list">
			<view class="plate-list-title">标签</view>
			<view class="plate-item-right">
				<view class="plate-item" v-for="(item, index) in get_labels_list" :key="index" @click="plateClick(item)">
					<view class="plate-item-text-active" v-if="labels_name == item">{{ item }}</view>
					<view class="plate-item-text" v-else>{{ item }}</view>
				</view>
			</view>
		</view>
		<view style="margin-top: 20upx;">
			<u--textarea v-model="content" placeholder="请输入内容"></u--textarea>
		</view>
		<view style="margin-top: 20upx;">
			<u-button type="success" text="提交" @click="submit_reporting"></u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			login_user_id: '', //登录用户id
			get_labels_list: [],
			labels_name: '',
			id: '',
			type: '',
			content: '',
		}
	},
	onLoad(options) {
		this.login_user_id = uni.getStorageSync('userid');
		if (this.login_user_id == '') {
			uni.showToast({
				title: '请先登录',
				icon: 'none'
			});
			uni.navigateTo({
				url: '/pages/login/login'
			});
			return false;
		}
		this.get_labels(options.type);
		this.id = options.id;
		this.type = options.type;
	},
	methods: {
		// 获取板块列表
		async get_labels(type) {
			let get_labels = await this.$api.get_labels({
				type: type,
			});
			if (get_labels.code == 1) {
				this.get_labels_list = get_labels.data;
				this.labels_name = get_labels.data[0];
			}
		},
		// 板块点击事件
		plateClick(item) {
			this.labels_name = item;
		},
		async submit_reporting() {
			if (this.content == '') {
				uni.showToast({
					title: '请输入内容',
					icon: 'none'
				});
				return false;
			}
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			let reporting = await this.$api.reporting({
				type: this.type,
				target_id: this.id,
				content: this.content,
				tag: this.labels_name,
			});
			if (reporting.code == 1) {
				uni.showToast({
					title: '举报成功',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 1000);
			}
		},
	}
}
</script>

<style lang="less">
page {
	background-color: #F9F9F9;
}

.plate-list {
	background-color: #fff;
	padding: 20upx;
	display: flex;
	align-items: center;

	.plate-list-title {
		font-size: 25upx;
		color: #666;
		width: 150upx;
	}

	.plate-item-right {
		/* 超出屏幕 左右滑动 */
		display: flex;
		align-items: center;
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;

		.plate-item {
			display: flex;
			align-items: center;

			.plate-item-text {
				font-size: 28upx;
				height: 25px;
				background-color: #F8F8F8;
				color: #8A8A8A;
				padding: 10upx 15upx;
				margin-right: 20upx;
				border-radius: 20upx;
			}

			.plate-item-text-active {
				background-color: #5AC725;
				color: #fff;
				font-size: 28upx;
				height: 25px;
				padding: 10upx 15upx;
				margin-right: 20upx;
				border-radius: 20upx;
			}
		}
	}
}
</style>
